import { createApp, ref, h } from 'vue'
import SYTKBox from '@/components/showApi/SYTK.vue'
import YSZCBox from '@/components/showApi/YSZC.vue'
import ShareBox from '@/components/showApi/shareBox.vue'
import addressBox from '@/components/showApi/adressBox.vue'
import { useRouter } from 'vue-router'

// 显示使用条款的盒子
export function showSYTKBox(
  data = {
    title: '使用须知',
  },
  callback,
) {
  const div = document.createElement('div')
  document.body.appendChild(div)

  // 创建一个 ref 来存储组件实例
  const SYTKBoxRef = ref(null)

  const app = createApp({
    components: { SYTKBox },
    setup() {
      return { SYTKBoxRef }
    },
    mounted() {
      // 初始化充值框内容
      if (SYTKBoxRef.value) {
        SYTKBoxRef.value.init(data, callback)
      }
    },
    render() {
      return h(SYTKBox, { ref: SYTKBoxRef }) // 使用 h 函数来渲染组件
    },
  })

  // app.use(i18n)
  app.mount(div)
}

// 显示分享二维码的盒子
export function showShareBox(path, callback) {
  const div = document.createElement('div')
  document.body.appendChild(div)

  // 创建一个 ref 来存储组件实例
  const ShareBoxRef = ref(null)

  const app = createApp({
    components: { ShareBox },
    setup() {
      return { ShareBoxRef }
    },
    mounted() {
      // 初始化充值框内容
      if (ShareBoxRef.value) {
        ShareBoxRef.value.init(path, callback)
      }
    },
    render() {
      return h(ShareBox, { ref: ShareBoxRef }) // 使用 h 函数来渲染组件
    },
  })

  // app.use(i18n)
  app.mount(div)
}

// 显示隐私政策&服务条款的盒子
export function showYSZCBox(title = '隐私政策', code = 'yszc') {
  const div = document.createElement('div')
  document.body.appendChild(div)

  // 创建一个 ref 来存储组件实例
  const YSZCBoxRef = ref(null)

  const app = createApp({
    components: { YSZCBox },
    setup() {
      return { YSZCBoxRef }
    },
    mounted() {
      // 初始化充值框内容
      if (YSZCBoxRef.value) {
        YSZCBoxRef.value.init(title, code)
      }
    },
    render() {
      return h(YSZCBox, { ref: YSZCBoxRef }) // 使用 h 函数来渲染组件
    },
  })

  // app.use(i18n)
  app.mount(div)
}

// 显示选择地址的盒子
export function showUseAddressBox(id = null, callback) {
  const div = document.createElement('div')
  document.body.appendChild(div)

  // 创建一个 ref 来存储组件实例
  const addressBoxRef = ref(null)

  const app = createApp({
    components: { addressBox },
    setup() {
      return { addressBoxRef }
    },
    mounted() {
      // 初始化充值框内容
      if (addressBoxRef.value) {
        addressBoxRef.value.init(id, callback)
      }
    },
    render() {
      return h(addressBox, { ref: addressBoxRef }) // 使用 h 函数来渲染组件
    },
  })

  // app.use(i18n)
  app.mount(div)
}
